import React from "react"
import { InputItem, Checkbox, Button, List, Toast } from 'antd-mobile'
import { createForm } from 'rc-form'
import { connect } from 'react-redux'
import { actionLogin } from '@/store/user/actions'
import { Link } from 'react-router-dom'
import "./index.scss"

const CheckboxItem = Checkbox.CheckboxItem

class Login extends React.Component {
  render() {
    const { getFieldProps } = this.props.form
    return (
      <div className="page_login">
        
        <div className="login_header">
          <div className="login_header_left">
            <Link to='/home'>
              <i className="iconfont iconshouye" />
            </Link>
          </div>
          <div className="login_header_title">登录</div>
          <span>
            <Link to='/register'>注册</Link>
          </span>
        </div>

        <div className="login_main">
          <div>
            <List>
              <InputItem
                {...getFieldProps('userName')}
                clear
                placeholder='请输入用户名'
              >账户</InputItem>
              <InputItem
                {...getFieldProps('password')}
                clear
                placeholder='请输入登录密码'
                type='password'
              >密码</InputItem>
            </List>
          </div>

          <div className="login_main_center">
            <label>
              <CheckboxItem>七天自动登录</CheckboxItem>
            </label>

            <span className='login_main_center_span'>忘记密码?</span>
          </div>
        </div>

        <div className="login_footer">
          <Button
            type='primary'
            style={{ color: '#fff' }}
            onClick={() => {
              let userName = getFieldProps('userName').value
              let password = getFieldProps('password').value 
              let loginInfo = {userName, password}

              if (userName && password) {
                this.props.handleLogin(loginInfo, this.props)
              } else {
                Toast.fail('表单不能为空')
              }
            }}
          >登录</Button>
        </div>
      </div>
    )
  }
}

Login = createForm()(Login)

export default connect(
  null,
  dispatch => ({
    handleLogin(loginInfo, props) {
      dispatch(actionLogin(loginInfo, props))
    }
  })
)(Login)
